<template>
    <div>
        <div class="carheader">
          <div class="botnha"></div>
          <p class="headper">马自达自达</p>
          <div class="helpmub">
            <img src="../../static/image/call.png" alt="">
          </div>
        </div>
        <div class="bannerdiv">
          <img src="../../static/image/banner1.jpg" alt="">
        </div>
        <div class="txtdiv">
            <ul class="ulme">
                <li class="meli1">
                  <i class="iconcar"><img src="../../static/image/elcar.png" alt=""></i>
                  <p class="carExplain">上门服务</p>
                </li>
                <li class="meli2" id="meli2">
                  <i class="iconcar"><img src="../../static/image/sell.png" alt=""></i>
                  <p class="carExplain">到店服务</p>                  
                </li>
                <li class="meli3" id="meli3">
                  <i class="iconcar"><img src="../../static/image/selt.png" alt=""></i>
                  <p class="carExplain">特价套餐</p>                   
                </li>
                <li class="meli4" id="meli4">
                  <i class="iconcar"><img src="../../static/image/me.png" alt=""></i>
                  <p class="carExplain">我的</p> 
                </li>
            </ul>
        </div>
      <p></p>
    </div>

</template>
<script>
export default {
  name: "",
  data() {
    return {
      data: ""
    };
  },
  created() {}
};
</script>
<style scoped>
.carheader {
  height: 100px;
  width: 100%;
  background-color: #1d2937;
}
.botnha {
  width: 25%;
  float: left;
  height: 100%;
}
.headper {
  width: 50%;
  height: 100%;
  float: left;
  font-size: 30px;
  color: #fff;
  text-align: center;
  line-height: 100px;
}
.helpmub {
  height: 100%;
  width: 25%;
  float: right;
}
.helpmub img {
  height: 55px;
  margin: 17px 0 0 70px;
}
.bannerdiv {
  width: 100%;
  height: 380px;
}
.bannerdiv img {
  width: 100%;
  height: 100%;
}
.txtdiv,
.ulme {
  width: 100%;
  height: auto;
}
.ulme {
  overflow: hidden;
  background-color: #fff;
}
.ulme li {
  width: 49.5%;
  float: left;
  height: 240px;
  border: 1px solid #eeeeee;
}
.iconcar {
  height: 50%;
  display: block;
  width: 50%;
  margin-left: 25%;
}
.iconcar img {
  padding-left: 18%;
}
.carExplain {
  width: 100%;
  height: 50%;
  line-height: 80px;
  text-align: center;
  color: #000;
  font-size: 30px;
}
.meli1,
.meli2,
.meli3 {
  border-top: 0px;
  border-left: 0px;
}
#meli2 {
  border-right: 0px;
}
#meli2 img{
  height: 60px;
  padding: 0.6rem 0 0 0.85rem;
}
#meli3 {
  border-bottom: 0px;
}
#meli3 img{
  height: 60px;
  padding: 0.6rem 0 0 0.7rem;
}
#meli4 {
  border-bottom: 0px;
  border-right: 0px;
}
#meli4 img{
  padding: 0.6rem 0 0 0.85rem;
  height: 60px;
}
</style>



